<template>
  <a-card>
<!--    <div>-->
<!--      <a-form layout="horizontal">-->
<!--        <div>-->
<!--          <a-row >-->
<!--            <a-col :md="6" :sm="24" >-->
<!--              <a-form-item label="选择园区" :labelCol="{span: 5}" :wrapperCol="{span: 18, offset: 1}">-->
<!--                <a-select v-model="query.farmName" placeholder="请选择园区" @change="farmChange">-->
<!--                  <a-select-option-->
<!--                      v-for="(item, index) in farmList"-->
<!--                      :key="index" :value="item.FarmId">-->
<!--                    {{item.FarmName}}-->
<!--                  </a-select-option>-->
<!--                </a-select>-->
<!--              </a-form-item>-->
<!--            </a-col>-->
<!--            <a-col :md="6" :sm="24">-->
<!--              <div style="margin: 3px 0 0 8px;">-->
<!--                <a-button type="primary" @click="search">查询</a-button>-->
<!--              </div>-->
<!--            </a-col>-->
<!--          </a-row>-->
<!--        </div>-->
<!--      </a-form>-->
<!--    </div>-->
    <div class="main">
      <div class="card-list">
        <a-list
            :grid="{gutter: 24, lg: 4, md: 3, sm: 1, xs: 1}"
            :dataSource="devVisualList"
        >
          <a-list-item slot="renderItem" slot-scope="item">
            <template>
              <a-card :hoverable="true">
                <a-card-meta>
                  <div class="meta-title" slot="title" :style="{'color': theme.color}">{{item.name}}</div>
                  <div class="meta-content" slot="description">园区名称:  {{item.farmName}}</div>
                  <div class="meta-content" slot="description">地块名称:  {{item.greenHouseName}}</div>
                </a-card-meta>
                <a slot="actions" @click="showVisual(item)">查看</a>
              </a-card>
            </template>
          </a-list-item>
        </a-list>
      </div>
    </div>
  </a-card>
</template>

<script>
import {mapState} from 'vuex'
import {farmIdList} from "@/services/largeScreen";
import {list as farmList} from '@/services/farm'

export default {
  name: "Info",
  data() {
    return {
      // 园区
      query: {
        farmId: '',
        farmName: ''
      },
      farmList: [],
      // 页面
      devVisualList: [],
      // 全部设备
      devList:[]
    }
  },
  computed: {
    ...mapState('setting', ['theme']),
  },
  created() {
    // 获取园区
    this.getFarmList()
  },
  methods: {
    // 获取园区
    async getFarmList() {
      this.farmList = []
      let res = await farmList()
      res.Data.forEach((item)=>{
        if(item.FarmId){
          this.farmList.push(item.FarmId)
        }
      })
      this.search()
    },
    // 选择园区
    farmChange(e) {
      this.query.farmId = e
    },
    // 查询园区下的大屏
    async search() {
      let res = await farmIdList(this.farmList)
      if(res.resp_code === 0){
        this.devVisualList = res.datas
      }
    },
    // 预览大屏
    showVisual(item) {
      window.open(`${process.env.VUE_APP_API_BASE_URL_LARGE}by/?id=${item.id}&USER_MOBILE=${localStorage.getItem('USER_MOBILE')}&PASSWORD=${this.toCode(localStorage.getItem('PASSWORD'))}`);
    },
    // 组态默认登录加密
    toCode(str) {
      // 加密字符串
      // 定义密钥，36个字母和数字
      const key = '0123456789ABCDEFGHIJKLMNOPQRSTUVWXYZ'
      const st = key.length // 获取密钥的长度
      const a = key.split('') // 把密钥字符串转换为字符数组
      let s = ''
      let b
      let b1
      let b2
      let b3 // 定义临时变量
      for (let i = 0; i < str.length; i++) { // 遍历字符串
        b = str.charCodeAt(i) // 逐个提取每个字符，并获取Unicode编码值
        b1 = b % st // 求Unicode编码值得余数
        b = (b - b1) / st // 求最大倍数
        b2 = b % st // 求最大倍数的于是
        b = (b - b2) / st // 求最大倍数
        b3 = b % st // 求最大倍数的余数
        s += a[b3] + a[b2] + a[b1] // 根据余数值映射到密钥中对应下标位置的字符
      }
      return s // 返回这些映射的字符
    },
  }
}
</script>

<style scoped lang="less">
.meta-title{
  font-size: 18px;
}
.meta-content{
  font-size: 15px;
  margin-top: 5px;
}
</style>
